<template>
	<div>
		<div class="row isopen">
			暂未开卡
		</div>
		<div class="row" v-if="isOpen">
			<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
				<div class="panel bk-widget bk-border-off bk-noradius">
					<div class=" bk-bg-white bk-fg-danger bk-ltr bk-padding-40" style="height:210px;">
						<div class="row">
							<div class="col-xs-4 text-left bk-vcenter bk-padding-off">
										<span class="bk-round bk-border-off bk-icon bk-icon-3x unicom-logo">
											<!--<i class="fa fa-download fa-3x"></i>-->
										</span>
							</div>
							<div class="col-xs-8 text-center bk-vcenter">
								<h6 class="bk-margin-off">卡片总数</h6>
								<h4 class="bk-margin-off">1,256</h4>
							</div>
						</div>
						<div class="progress bk-margin-off-bottom bk-margin-top-10 bk-noradius" style="height: 6px;">
							<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
								<span class="sr-only">50% </span>
							</div>
						</div>
						<div class="bk-margin-top-10">
							<div class="row">
								<div class="col-xs-6">
									<small>本月到期卡片数量: 32</small>
								</div>
								<div class="col-xs-6 text-right">
									<a href="#" class="bk-fg-danger bk-fg-darken"><small>View details</small> <i class="fa fa-database"></i></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
				<div class="panel bk-widget bk-border-off bk-noradius" style="height:210px;background-color: #fff;">
					<div class="panel-body bk-bg-white text-center bk-fg-info bk-padding-top-15 bk-padding-bottom-15">
						<div class="row">
							<div class="col-xs-8 text-left bk-vcenter">
								<div class="">
									<h4 class="bk-margin-off" style="font-weight: 500; color:#d9534f">卡片状态统计</h4>

								</div>
							</div>
							<div class="col-xs-4 bk-vcenter text-right">
								<i class="fa fa-globe fa-4x"></i>
							</div>
						</div>
					</div>
					<div class="list-group">
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									测试
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-success bk-noradius">12张</span>
								</div>
								<div class="col-xs-3">
									预约销户
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-danger bk-noradius">12张</span>
								</div>
							</div>
						</a>
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									已激活
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-warning bk-noradius">12张</span>
								</div>
								<div class="col-xs-3">
									失效
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-info bk-noradius">12张</span>
								</div>
							</div>
						</a>
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									停卡
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-primary bk-noradius">12张</span>
								</div>
								<!--<div class="col-xs-3">
									更换状态
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-dark bk-noradius">12张</span>
								</div>-->
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="row"  v-if="isOpen">
			<div class="col-lg-12">
				<div class="panel">
					<div class="panel-heading bk-bg-primary">
						<h6><i class="fa fa-table red"></i><span class="break"></span>卡片信息</h6>
					</div>

					<div class="panel-body">
						<div style="float: right; margin-bottom: 10px; width: 450px">
							<div class="input-group" style="float: left;width:350px">
								<input type="email" id="input2-group2" name="input2-group2" class="form-control" placeholder="ICCID、套餐、卡状态、卡类型">
								<span class="input-group-btn">
										<button type="button" class="btn btn-success">Search</button>
									</span>
							</div>
							<button id="enable" class="btn btn-primary" @click="openSearch" style="float: right;" v-text="searchTxt"></button>
						</div>
						<div class="clearfix"></div>
						<div id="wizard2" class="wizard-type2" v-show="isOpenSearch">
							<ul class="steps nav nav-pills">
								<li class="complete"><a style="font-size: 14px; color:#269abc" data-toggle="tab"><span class="badge badge-info"><i class="fa fa-star"></i></span> 搜索条件</a></li>
							</ul>
							<div class="progress thin progress-striped active" style="height: 5px;">
								<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
								</div>
							</div>
							<div class="tab-content">
								<div class="tab-pane active" id="tab22">
									<div class="row">
										<div class="col-sm-12">
											<div class="form-group has-feedback">
												<label>ICCID</label>
												<div class="input-group">
													<span class="input-group-addon">
														<i class="fa fa-asterisk"></i>
													</span>
													<input type="text" class="form-control" name="start">
													<span class="input-group-addon">to</span>
													<input type="text" class="form-control" name="end">
												</div>
											</div>
										</div>
										<div class="col-sm-12">
											<div class="form-group has-feedback">
												<label>生效日期</label>
												<div class="input-group">
													<span class="input-group-addon">
														<i class="fa fa-calendar"></i>
													</span>
													<input type="text" class="form-control" name="start">
													<span class="input-group-addon">to</span>
													<input type="text" class="form-control" name="end">
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="form-group col-sm-4">
											<label>客户名称</label>
											<select class="form-control">
												<option>全部</option>
												<option>休眠期</option>
												<option>测试期</option>
												<option>可激活</option>
												<option>已激活</option>
												<option>停用</option>
												<option>作废</option>
											</select>
										</div>
										<div class="form-group col-sm-4">
											<label>所属账号</label>
											<select class="form-control">
												<option>全部</option>
												<option>贴片IC</option>
												<option>工业级标准卡</option>
												<option>Micro卡</option>
												<option>Nano卡</option>
											</select>
										</div>
										<div class="form-group col-sm-4">
											<label>订单编号</label>
											<select class="form-control">
												<option>全部</option>
												<option>少于5M</option>
												<option>少于10M</option>
											</select>
										</div>
									</div>
									<div class="row">
										<div class="form-group col-sm-4">
											<label>卡状态</label>
											<select class="form-control">
												<option>全部</option>
												<option>测试状态</option>
												<option>已激活状态</option>
												<option>停卡状态</option>
												<option>预约销户状态</option>
												<option>失效状态</option>
											</select>
										</div>
										<div class="form-group col-sm-4">
											<label>套餐</label>
											<select class="form-control">
												<option>全部</option>
												<option>套餐1</option>
												<option>套餐2</option>
												<option>套餐3</option>
												<option>套餐4</option>
											</select>
										</div>
										<div class="form-group col-sm-4">
											<label>剩余流量</label>
											<select class="form-control">
												<option>全部</option>
												<option>少于10M</option>
												<option>少于20M</option>
												<option>少于50M</option>
											</select>
										</div>
									</div>
								</div>


								<div class="actions">
									<input type="button" class="btn btn-info button-previous" name="previous" value="Search">
								</div>
								<br>
							</div>
						</div>

						<div class="table-responsive">
							<table class="table table-striped table-bordered bootstrap-datatable datatable">
								<thead>
								<tr>
									<th>订单编号</th>
									<th>ICCID</th>
									<th>卡号码</th>
									<th>生效日期</th>
									<th>套餐</th>
									<th>卡状态</th>
									<th>当月实时流量</th>
									<th>剩余流量</th>
									<th>有效日期</th>
									<th>客户名称</th>
									<th>所属账号</th>
									<th>操作</th>
								</tr>
								</thead>
								<tbody>

								<tr>
									<td>234</td>
									<td>23</td>
									<td>123</td>
									<td>123</td>
									<td>200</td>
									<td>234</td>
									<td>2012-12-12</td>
									<td>2012-12-12</td>
									<td>2012-12-12</td>
									<td>2012-12-12</td>
									<td>2012-12-12</td>
									<td>
										<a class="btn btn-info" title="订购套餐" href="#">
											<i class="fa fa-edit "></i>
										</a>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div >

	</div>
</template>
<script>

	import {mapGetters} from 'vuex'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus'
			})
		},
		data () {
			return {
				classids: '',
				isOpenSearch: false,
				searchTxt: '高级搜索',
				isOpen: 0
			}
		},
		methods: {
			goItems (ids) {

				// 每个分馆
				this.classids = ids
				//	this.$store.dispatch('fetchProductsData', ids)
			},

			// 展开或收起高级搜索
			openSearch () {
				if(!this.isOpenSearch){
					this.isOpenSearch = true
					this.searchTxt = '收起搜索'
					return
				}
				this.isOpenSearch = false
				this.searchTxt = '高级搜索'
			}
		},
		created () {

		},
		mounted () {

			// 全球
			//	this.$store.dispatch('fetchProductsData', this.classids)

		},
		components: {
		}
	}
</script>

<style>
.isopen {
	font-size: 16px;
	text-align: center;
	margin-top: 100px;
	color: red;
}
</style>